<template>
	<view class="container">
		<view class="top">
			<swiper class="dswiper" circular :autoplay="false" :interval="5000" :current="current"
				@change="swiperchange">
				<swiper-item v-for="(item,index) in courseDetail.headerImageList" :key="newGuid">
					<view class="swiper-item ">
						<img-item class="swiper-img" :src="item"></img-item>
					</view>
				</swiper-item>
			</swiper>
			<view class="swiper_num" v-if="courseDetail.headerImageList.length>1">
				{{current+1}}/{{courseDetail.headerImageList.length}}
			</view>
		</view>
		<view class="course_body">
			<view class="course_details">
				<view class="course_name">{{courseDetail.name}}</view>
				<view class="details_introduction">
					<view class="spot">●</view>{{courseDetail.subtitle}}
				</view>
				<view class="course_integral">
					<view class="integral_name">报名费</view>
					<view class="integral_info">
						<text class="p1"><text class="integral">{{courseDetail.registrationFee}}</text>积分</text>
						<text class="p1"><text class="applicants">报名人数：</text>{{courseDetail.registeredNumber}}/{{courseDetail.registrationQuotaNumber?courseDetail.registrationQuotaNumber:"∞"}}</text>
					</view>
				</view>
			</view>
			<view class="course_arrangement">
				<!-- <view class="arrangement_title">课程安排</view> -->
				<view class="arrangement_body" v-if="courseDetail">
					<view class="arow">
						<text class="arowl">活动时间:</text>
						<text>{{courseDetail.startTime}}</text>
					</view>
					<view class="arow">
						<text class="arowl">主办方:</text>
						<text>{{courseDetail.institutionName}}</text>
					</view>
					<view class="arow" >
						<text class="arowl">活动地点:</text>
						<text>{{courseDetail.address}}</text>
					</view>
				</view>
			</view>
			<view class="course_talent" v-if="talent">
				<view class="talent_top">
					<text>达人授课</text>
					<text class="gotalents" @click="goPage('/pages/talents/detail',{talentMobile:talent.talentMobile})">查看达人详情 ></text>
				</view>
				<view class="talent_itembody">
					<view class="item_img">
						<!-- <img-item :src="talent.introductionImageList[0]"></img-item> -->
						<img-item :src="talent.photo"></img-item>
					</view>
					<view class="item_info">
						<view class="item_title">{{talent.name}}</view>
						<item-score :score="talent.score"></item-score>
						<view class="item_sign">
							<view class="sign_item" v-for="(sv,sk) in talent.skillList" :key="sk">{{sv}}</view>
						</view>
						<view class="item_tip">本课程由社区达人提供授课，赶快参加吧！</view>
					</view>
				</view>
			</view>
			<view class="course_introduction">
				<view class="introduction_body">
					<view class="introduction_title">活动介绍</view>
					<view class="introduction_info" :class="{open:moreshowFlag&&moreState}">
						<rich-text class="introduction_text" :nodes="introduction"></rich-text>
					</view>
				</view>
				<view class="more" v-if="moreshowFlag" @click="moreState=!moreState">{{moreState?"更多":"收起"}}简介 
					<uni-icons v-show="moreState" type="bottom" color="#7F7F7F"></uni-icons>
					<uni-icons v-show="!moreState" type="top" color="#7F7F7F"></uni-icons>
				</view>
			</view>
			<view class="course_img">
				<image class="img2" v-for="(inimg,idx) in imageList2" :key="idx" :src="inimg"
				:id="'img'+idx" @load="getImgInfo" :style="{height: imageListHeight[idx] + 'px'}">
				</image>
				<view class="more" v-show="imageList.length > 1" @click="showMoreImg">
					{{moreState2?"更多":"收起"}}
					<uni-icons v-show="moreState2" type="bottom" color="#7F7F7F"></uni-icons>
					<uni-icons v-show="!moreState2" type="top" color="#7F7F7F"></uni-icons>
				</view>
			</view>
		</view>
		<view class="course_foot">
			<button class="button foot_share" open-type="share"><text class="foot_text">分享</text></button>
			<button class="foot_appointment" type="default" @click="popup()"
				:disabled="appointmentflag">{{text}}</button>
		</view>
		<uni-popup ref="appointment" type="bottom">
			<view class="popup">
				<view class="popup_top">
					<view class="appointment_img">
						<img-item class="swiper-img" :src="courseDetail.cover"></img-item>
					</view>
					<view class="appointment_info">
						<view class="appointment_title">{{courseDetail.name}}</view>
						<view class="appointment_jf">{{courseDetail.registrationFee}}积分</view>
					</view>
				</view>
				<view class="enrollment">
					<view class="one">报名方式：</view>
					<view class="two">
						<view class="twol">积分报名</view>
						<view class="twor">{{courseDetail.registrationFee}}积分</view>
					</view>
					<view class="there">积分余额：{{ userScore }}</view>
				</view>
				<view class="tips">
					报名后积分不可退换，不可取消，请根据实际情况报名活动！
				</view>
				<button class="appointment" type="default" @click="appointment" :disabled="appointmentflag2">{{popuptext}}</button>
				<view class="agreement">
					点击“立即报名”即同意<text class="agreements">《用户协议》</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		newGuid
	} from "@/common/util";
	import {
		activityDetails,
		activitySignup
	} from "@/http/api";
	import itemScore from "@/components/base/item-score.vue";
	export default {
		components:{itemScore},
		data() {
			return {
				current: 0,
				text: "立即报名",
				popuptext: "立即报名",
				appointmentflag: true,
				appointmentflag2: false,
				classid: "",
				courseDetail: null,
				talent: null,
				introduction: "",
				orderid: "",
				imageList: [],
				imageList2:[],
				imageListHeight: [],
				imgshowFlag: false,
				moreshowFlag: false,
				moreState:1,
				moreState2:true,
				content:"",
			}
		},
		onLoad(e) {
			if(e?.content){
				this.content = e.content;
				let _obj = JSON.parse(decodeURIComponent(e.content));
				this.classid = _obj.id;
				this.getCourseDetail();
			}
			this.getScore();
		},
		methods: {
			getCourseDetail() {
				this.$request({
					url: activityDetails,
					data: {
						id:this.classid
					}
				}).then(res => {
					if(!res) return false;
					this.appointmentflag = false;
					this.courseDetail = res;
					this.introduction = res.introduce;
					this.classid = res.id;
					this.imageList = res.imageList;
					this.imgList();
					res.imageList.forEach((item) => {
						this.imageListHeight.push(0);
					});
					if(res.talent)this.talent = res.talent;
					if (res.registrationQuotaNumber && res.registeredNumber >= res.registrationQuotaNumber) {
						this.text = "名额已满";
						this.appointmentflag = true;
					}
					const _time = new Date().getTime();
					const _Deadline = new Date(res.registrationDeadline).getTime();
					if (_time>_Deadline) {
						this.text = "活动已截止";
						this.appointmentflag = true;
					}
					if(res.isRegistered){
						this.text = "已报名";
						this.appointmentflag = true;
					}
					this.$nextTick(()=>{
						this.getIntroduction();
					})
				})
			},
			appointment() {
				if (this.classid) {
					this.$request({
						url: activitySignup,
						data: {
							id: this.classid
						},
						method: 'POST'
					}).then(res => {
						this.orderid = res;
						this.$refs.appointment.close();
						this.text = "已报名";
						this.popuptext = "已报名";
						this.appointmentflag = true;
						this.appointmentflag2 = true;
						uni.showToast({
							title: '报名成功',
							icon: 'success'
						})
					})
				} else {
					uni.showToast({
						title: '缺失活动id',
						icon: 'error'
					})
				}
			},
			getIntroduction(){
				const query = uni.createSelectorQuery().in(this);
				query.select('.introduction_info').boundingClientRect(data => {
					if(data.height>71){
						this.moreshowFlag = true;
					}
				}).exec();
			},
			getImgInfo(e) {
				var _this = this;
				var id = e.currentTarget.id;
				var index = id.substr(3);
				var item = _this.imageListHeight[index];
				const query = uni.createSelectorQuery().in(this);
				query.select('#' + id).boundingClientRect(data => {
					_this.imageListHeight[index] = data.width * e.detail.height / e.detail.width;
					_this.$forceUpdate();
				}).exec();
			},
			showMoreImg(){
				this.moreState2 = !this.moreState2;
				this.imgList();
			},
			imgList(){
				//如果moreState为ture
				//如果图片列表大于1条，取第一条，小于等于一条，取所有
				if (this.moreState2) {
					if (this.imageList&&this.imageList.length > 1) {
						this.imageList2 = this.imageList.slice(0,1);
					} else {
						this.imageList2 = this.imageList;
					}
				}
				//如果moreState为false，展示所有
				if (!this.moreState2) {
					this.imageList2 = this.imageList;
				}
			},
			swiperchange(e) {
				this.current = e.detail.current;
			},
			popup() {
				if (this.appointmentflag) return
				this.toAutorize()
				if(this.userScore<this.courseDetail.registrationFee){
					this.appointmentflag2 = true;
					this.popuptext = "积分不足";
				}
				this.$refs.appointment.open();
			},
			vieworder() {
				this.$refs.success.close();
				uni.navigateTo({
					url: '/pages/user/order/detail?id=' + encodeURIComponent(JSON.stringify(this.orderid))
				});
			}
		}
	}
</script>

<style lang="scss">
	@import "./index.scss";
</style>
